<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件的概念</title>
</head>
<body>
<div id="app">
<!--  <html-a parent-msg="string"></html-a>-->
  <!--parent-msg 如果有大写必须以连接符的形式-->
<!--  <html-a :parent-msg="message"></html-a>-->
  <html-a :parent-msg="post.likes"></html-a>
</div>

<script src="../vue.global.js"></script>
<script>
  // htmlA 要写在 Vue.createApp 之前
  const htmlA = {
    data(){
      return{
        message: '子组件: Vue3'
      }
    },
    // props 通信
    props: {
      parentMsg: Number
    },
    template: `
      <div>{{typeof parentMsg}}</div>
      <div>{{parentMsg}}</div>
      <div>{{message}}</div>
    `
  }

  app = Vue.createApp({
    data(){
      return{
        message: '1314',
        post: {
          likes: 100,
        }
      }
    },
    components: {
      'html-a': htmlA
    }
  }).mount('#app')
</script>
</body>
</html>
